<!-- 在讲 flex 的知识点之前，我们事先约定两个概念：

弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。

子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。

主轴和侧轴

主轴：flex容器的主轴，默认是水平方向，从左向右。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
PS：主轴和侧轴并不是固定不变的，可以通过 flex-direction 更换方向
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";
            font-size:22px;

        }
        h3 {
            font-weight: normal;
        }
        section{
            width: 1000px;
            margin: 40px auto;
        }
        ul{
            background-color: #fff;
            border: 1px solid #ccc;
        }
        ul li {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 10px;

        }
        section:nth-child(1) ul{
            overflow: hidden; /* 清除浮动 */
        }

        section:nth-child(1) ul li{
            float: left;
        }
        section:nth-child(2) ul{
            display: flex;
        }
        section:nth-child(3) ul{
            display: flex;
            flex-direction: row;
        }
         section:nth-child(4) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :水平翻转*/
            flex-direction: row-reverse;
        }

        section:nth-child(5) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :垂直*/
            flex-direction: column;
        }

        section:nth-child(6) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :垂直*/
            flex-direction: column-reverse;
        }

    </style>
</head>
<body>
    <section>
        <h3>传统布局</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h3>伸缩布局 display:flex</h3>
         <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h3>主轴方向 flex-direction:row</h3>
         <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h3>主轴方向 flex-direction:row-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴方向 flex-direction:column</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

     <section>
        <h3>主轴方向 flex-direction:column-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
</body>
</html>